<template>
  <div>
    <BaseForm
        ref="searchForm"
        type="search"
        :items="formSearchItems"
        v-model:form="searchParams"
        @search="handleSearch"
    >
      <template #suffix-button>
        <el-button type="primary" @click="handleEdit({})">
          <el-icon>
            <Plus/>
          </el-icon>
          添加
        </el-button>
      </template>
    </BaseForm>
    <BaseTable
        ref="baseTable"
        :searchParams="searchParams"
        :defaultHeight="284"
        :serial="true"
        :getTableDataFn="lockService.getPageList"
    >
      <el-table-column prop="lockName" label="开闭所名称"/>
      <el-table-column
          prop="lineDtoList"
          label="关联线路"
          show-overflow-tooltip
      >
        <template #default="scope">
          {{ scope.row.lineDtoList?.map((n) => n.lineName).join("、") }}
        </template>
      </el-table-column>

      <el-table-column prop="updateTime" label="最后修改时间" width="170px">
        <template #header>
          <span>最后修改时间</span>
          <SortTable
              :sortTablekey="sortTablekey"
              @click="sortTablekey = 1"
              :handleSearch="handleSearch"
          >
          </SortTable>
        </template>
      </el-table-column>
      <el-table-column label="操作" fixed="right" width="100">
        <template #default="scope">
          <el-link
              :underline="false"
              link
              type="primary"
              size="small"
              @click.prevent="handleEdit(scope.row)"
          >编辑
          </el-link
          >
          <el-link
              :underline="false"
              link
              type="danger"
              size="small"
              @click.prevent="handleDel(scope.row)"
          >删除
          </el-link
          >
        </template>
      </el-table-column>
    </BaseTable>
    <BaseDialog
        :title="(!ruleForm.lockId ? '新增' : '编辑') + '开闭所'"
        :handleCancel="handleCancel"
        :dialogVisible="dialogVisible"

    >
      <BaseForm
          v-if="dialogVisible"
          type="rule"
          :handleOk="handleOk"
          :handleCancel="handleCancel"
          :items="formItems"
          v-model:form="ruleForm"
          :rules="rules"
          label-width="120px"
          :refresh="handleSearch"
      >
      </BaseForm>
    </BaseDialog>
  </div>
</template>

<script setup lang="ts">
import {powerService} from "@/api/power";
import openMsgBox from "@/hooks/messageBox.js";
import {lockService} from "@/api/lock";
import {lineService} from "@/api/line";

const lineIdList = ref([]);
const formItems = ref([
  {
    name: "开闭所名称",
    key: "lockName",
    type: "input",
  },
  {
    name: "关联线路",
    key: "lineId",
    clearable: true,
    type: "select-page-multiple",
    funName: "getByAreaQueryByLine",
    placeholder: "请选择关联线路，多选",
    option: {
      name: "lineName",
      value: "lineId",
    },
    firstValue: "",
    list: [],//用于存储已选择的列表
  },
]);
const formSearchItems = ref([
  {
    name: "开闭所名称",
    key: "lockName",
    type: "input",
  },
  {
    name: "关联线路",
    key: "lineId",
    clearable: true,
    type: "select-page",
    funName: "getByAreaQueryByLine",
    placeholder: "请选择关联线路",
    option: {
      name: "lineName",
      value: "lineId",
    },
  },
]);
const searchParams = ref({
  lockName: "",
});

const baseTable = ref(null);
const sortTablekey = ref(1);
const handleSearch = (data = {sort: undefined}, e = "") => {
  if (e != "sort") sortTablekey.value = 0;
  baseTable.value.handleSearch({
    ...searchParams.value,
    updateTimeOrder: data?.sort,
  });
};
const ruleForm = ref({
  lockId: "",
  powerId: "",
  powerName: "",
  lineId: [],
});
const rules = reactive({
  lockName: [{required: true, message: "请输入", trigger: "change"}],
});
const dialogVisible = ref(false);

const handleEdit = (row) => {
  console.log(JSON.parse(JSON.stringify(row)))
  if (row.lockId && row.lineDtoList) {
    row.lineIdList = row.lineDtoList.map((n) => n.lineId);
    row.lineId = row.lineDtoList.map((n) => n.lineId);
    formItems.value[1].firstValue = row.lineId.toString();
    formItems.value[1].list = JSON.parse(JSON.stringify(row.lineDtoList));
  }
  ruleForm.value = {...row};
  dialogVisible.value = true;
};
const handleCancel = () => {
  dialogVisible.value = false;
};

const handleDel = (row) => {
  openMsgBox(
      {},
      () => {
        return lockService.delLock({data: row.lockId});
      },
      () => {
        handleSearch();
      }
  );
};
const getLineList = () => {
  lineService.getLineList({data: {}}).then((res) => {
    lineIdList.value = res.data.map((n) => {
      return {
        label: n.lineName + `(ID:${n.lineId})`,
        value: n.lineId,
      };
    });
  });
};
const handleOk = () => {
  if (ruleForm.value.lockId) {
    return lockService.updateLock({
      data: {...ruleForm.value, lineIdList: ruleForm.value.lineId},
    });
  } else {
    return lockService.addLock({
      data: {...ruleForm.value, lineIdList: ruleForm.value.lineId},
    });
  }
};
onMounted(() => {
  getLineList();
});
</script>

<style lang="scss" scoped></style>
